<template>
  <div style="height: 100%; width: 100%; position: relative" ref="buttondiv">
    <div class="pagetop">
      <div style="width: 100%">
        <el-col>
          <div>
            <vxe-toolbar>
              <template v-slot:buttons>
                <table>
                  <tr>
                    <td>快速查找</td>
                    <td>
                      <el-input v-model="searchtxt" @keyup.enter.native="QueryDateBase()" style="width: 160px"></el-input>
                    </td>
                    <td style="width: 2000px"></td>
                    <td style="align: left">
                      <el-button icon="el-icon-link" @click="btn_testconnect_clickEvent">测试连接</el-button>
                    </td>
                    <td style="align: left">
                      <el-button icon="el-icon-link" @click="btn_testallconnect_clickEvent">测试全部连接</el-button>
                    </td>
                    <td style="align: left">
                      <el-button icon="el-icon-plus" @click="btn_addconn" v-has="'PADD'"
                        :disabled="changeflag">新增</el-button>
                    </td>
                    <td style="align: left">
                      <el-button icon="el-icon-delete" @click="btn_delconn" v-has="'PDELETE'"
                        :disabled="changeflag">删除</el-button>
                    </td>
                    <td style="align: left">
                      <el-button icon="el-icon-document" @click="SaveAll()" v-has="'PMODIFY'"
                        :disabled="!changeflag">保存</el-button>
                    </td>
                    <td style="align: left">
                      <el-button icon="el-icon-document" @click="CancelChange()" v-has="'PMODIFY'"
                        :disabled="!changeflag">取消</el-button>
                    </td>
                  </tr>
                </table>
              </template>
            </vxe-toolbar>
          </div>
        </el-col>
      </div>
    </div>
    <div class="pagecenter" v-loading="pageinitloading" element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)">
      <rm-layout-right splitcolor="#ffffff" :splitwidth="3" :fixsize="670" :minfixsize="670" ref="layoutright">
        <div style="height: 100%">
          <vxe-table :data.sync="main_conn_data" :loading="main_conn_loading" :select-config="{ reserve: true }"
            :sort-config="{ trigger: 'cell' }" border height="auto" highlight-current-row highlight-hover-column
            highlight-hover-row how-header-overflow ref="conn_table" resizable show-overflow size="mini" stripe
            :row-class-name="GetRowClassName" show-header-overflow :optimization="{ animat: false }"
            @current-change="conn_table_changeEvent" header-align="center">
            <vxe-table-column field="connectioncode" sortable title="连接代码" width="120" show-overflow></vxe-table-column>
            <vxe-table-column field="connectionname" sortable title="连接名称" width="150" show-overflow></vxe-table-column>
            <vxe-table-column field="inuse" sortable title="是否启用" width="70" show-overflow align="center">
              <template v-slot="{ row, rowIndex, columnIndex }">
                <div :key="row.userno + rowIndex + columnIndex">
                  <el-checkbox v-model="row.inuse" disabled></el-checkbox>
                </div>
              </template>
            </vxe-table-column>
            <vxe-table-column field="seq" sortable title="序号" width="50" show-overflow></vxe-table-column>
            <vxe-table-column field="dbms" sortable title="数据库类型" width="80" show-overflow></vxe-table-column>
            <vxe-table-column field="servername" sortable title="服务器名称/IP" width="120" show-overflow></vxe-table-column>
            <vxe-table-column field="dbname" sortable title="数据库名称" width="115" show-overflow></vxe-table-column>
            <vxe-table-column field="port" sortable title="端口号" width="100" show-overflow></vxe-table-column>
            <vxe-table-column field="logid" sortable title="登录账号" width="75" show-overflow></vxe-table-column>
          </vxe-table>
        </div>
        <template v-slot:fix>
          <div>
            <el-tabs style="height: 100%" type="border-card" @tab-click="tab_getdata" v-model="tab_showflag">
              <el-tab-pane label="详细信息" name="tabname_jbxx">
                <table>
                  <tr>
                    <td>
                      <font color="#F56C6C">连接代码</font>
                    </td>
                    <td>
                      <el-input v-model="connectioninfo.connectioncode" @input="HasChange"></el-input>
                    </td>
                    <td>
                      <font color="#F56C6C">连接名称</font>
                    </td>
                    <td>
                      <el-input v-model="connectioninfo.connectionname" @input="HasChange"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td>数据库类型</td>
                    <td>
                      <el-select v-model="connectioninfo.dbms" placeholder="请选择" style="width: 190px" @change="DBChange"
                        clearable>
                        <el-option key="ODBC" label="ODBC" value="ODBC"></el-option>
                        <el-option key="SQL" label="SQL" value="SQL"></el-option>
                        <el-option key="ORACLE" label="ORACLE" value="ORACLE"></el-option>
                        <el-option key="MYSQL" label="MYSQL" value="MYSQL"></el-option>
                        <el-option key="" label="" value=""></el-option>
                      </el-select>
                    </td>
                    <td>
                      <el-checkbox v-model="connectioninfo.inuse" @change="HasChange"></el-checkbox>
                    </td>
                    <td>是否启用</td>
                  </tr>
                  <tr>
                    <td>服务器名称或IP</td>
                    <td>
                      <el-input style="width: 190px" v-model="connectioninfo.servername" @input="HasChange"></el-input>
                    </td>
                    <td>数据库名称</td>
                    <td>
                      <el-input style="width: 190px" v-model="connectioninfo.dbname" @input="HasChange"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td>端口号</td>
                    <td>
                      <el-input style="width: 100%" v-model="connectioninfo.port" @input="HasChange"></el-input>
                    </td>
                    <td>序号</td>
                    <td>
                      <el-input style="width: 100%" v-model="connectioninfo.seq" @input="HasChange"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td>登录帐户</td>
                    <td>
                      <el-input style="width: 190px" v-model="connectioninfo.logid" @input="HasChange"></el-input>
                    </td>
                    <td>帐户密码</td>
                    <td>
                      <el-input style="width: 190px" v-model="connectioninfo.logpass" type="password"
                        @input="HasChange"></el-input>
                    </td>
                  </tr>
                </table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </template>
      </rm-layout-right>
    </div>
    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" :title="main_conn_dialog_name"
      :visible.sync="main_conn_dialogflag" width="630px">
      <div>
        <table>
          <tr>
            <td>
              <font color="#F56C6C">连接代码</font>
            </td>
            <td>
              <el-input v-model="conn_info_F.connectioncode"></el-input>
            </td>
            <td>
              <font color="#F56C6C">连接名称</font>
            </td>
            <td>
              <el-input v-model="conn_info_F.connectionname"></el-input>
            </td>
          </tr>
          <tr>
            <td>数据库类型</td>
            <td>
              <el-select v-model="conn_info_F.dbms" placeholder="请选择" style="width: 190px" @change="DBChange">
                <el-option key="ODBC" label="ODBC" value="ODBC"></el-option>
                <el-option key="SQL" label="SQL" value="SQL"></el-option>
                <el-option key="ORACLE" label="ORACLE" value="ORACLE"></el-option>
                <el-option key="MYSQL" label="MYSQL" value="MYSQL"></el-option>
              </el-select>
            </td>
            <td>
              <el-checkbox v-model="conn_info_F.inuse"></el-checkbox>
            </td>
            <td>是否启用</td>
          </tr>
          <tr>
            <td>服务器名称或IP</td>
            <td>
              <el-input style="width: 190px" v-model="conn_info_F.servername"></el-input>
            </td>
            <td>数据库名称</td>
            <td>
              <el-input style="width: 190px" v-model="conn_info_F.dbname"></el-input>
            </td>
          </tr>
          <tr>
            <td>端口号</td>
            <td>
              <el-input style="width: 190px" v-model="conn_info_F.port"></el-input>
            </td>
            <td>序号</td>
            <td>
              <el-input style="width: 190px" v-model="conn_info_F.seq"></el-input>
            </td>
          </tr>
          <tr>
            <td>登录帐户</td>
            <td>
              <el-input style="width: 190px" v-model="conn_info_F.logid"></el-input>
            </td>
            <td>帐户密码</td>
            <td>
              <el-input style="width: 190px" v-model="conn_info_F.logpass" type="password"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <div style="margin-top: 5px; text-align: right">
                <el-button icon="el-icon-document" @click="
                  SaveAction(1)
                    .then(() => {
                      main_data_query();
                      $message({ message: '保存成功', type: 'success' });
                    })
                    .catch((res) => {
                      $message.error(res.msg);
                    })
                  ">保存</el-button>
                <el-button icon="el-icon-document-delete" @click="btn_conn_dialog_canelEvent">取消</el-button>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </el-dialog>
    <el-dialog title="测试连接失败" :visible.sync="testconndialog" width="30%">
      <div v-html="showmsg"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="testconndialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import { Promise } from "q";
import XE from "xe-utils"; //引入工具类
export default {
  name: "MNG124",
  data() {
    return {
      searchtxt: "",
      changeflag: false,
      pageinitloading: false,
      main_conn_data: [],
      main_conn_data_all: [],
      main_conn_loading: false,
      tab_showflag: "tabname_jbxx",
      connectioninfo: {},
      oldconn_info_B: {},
      main_conn_dialog_name: "",
      main_conn_dialogflag: false,
      conn_info_F: {},
      tabindex: "1",
      tabindexlist: [],
      buttontxt: "启用",
      testconndialog: false,
      showmsg: "",
    };
  },
  created() {
    this.main_data_query();
  },
  mounted() { },
  updated() {
  },
  methods: {
    QueryDateBase() {
      var searchtxt = this.searchtxt.toUpperCase();
      this.main_conn_data = XE.clone(
        this.main_conn_data_all.filter(item => item.connectioncode.toUpperCase().indexOf(searchtxt) > -1 || item.connectionname.toUpperCase().indexOf(searchtxt) > -1 || item.dbname.toUpperCase().indexOf(searchtxt) > -1), true);
    },
    //测试连接
    btn_testconnect_clickEvent() {
      return new Promise((s, f) => {
        if (XE.isUndefined(this.connectioninfo.connectioncode) || this.connectioninfo.connectioncode == "") {
          this.$message.error("请选择需要测试的数据！");
          f();
        }
        this.$tool
          .request({
            url: "MNG/MNG1/MNG124",
            method: "post",
            data: {
              action: "testconnect",
              connectioncode: this.connectioninfo.connectioncode
            }
          })
          .then(res => {
            if (res == "") {
              this.$message.success("测试连接成功！");
              s();
            } else {
              this.testconndialog = true;
              this.showmsg = res;
              f();
            }
          })
          .catch(e => {
            this.$message.error(e);
            f();
          });
      });
    },
    //测试全部连接
    btn_testallconnect_clickEvent() {
      return new Promise((s, f) => {
        this.$tool
          .request({
            url: "MNG/MNG1/MNG124",
            method: "post",
            data: {
              action: "testallconnect"
            }
          })
          .then(res => {
            if (res && res.errcode == 1) {
              if (res.list.length == 0) {
                this.$message.success("测试连接成功！");
              } else {
                this.showmsg = "";
                for (let i = 0; i < res.list.length; i++) {
                  this.showmsg += "<span style='color:red'>" + res.list[i].Item1 + "</span> " + res.list[i].Item2 + "\n";
                }
                this.testconndialog = true;
              }

              s();
            } else {
              this.testconndialog = true;
              this.showmsg = res.errmsg;
              f();
            }
          })
          .catch(e => {
            this.$message.error(e);
            f();
          });
      });
    },
    btn_addconn() {
      this.connectioninfo = { connectioncode: "", connectionname: "", dbms: "", inuse: true, servername: "IP地址,端口号", dbname: "", port: "", seq: "", logid: "", logpass: "" };
      this.conn_info_F = { connectioncode: "", connectionname: "", dbms: "", inuse: true, servername: "IP地址,端口号", dbname: "", port: "", seq: "", logid: "", logpass: "" };
      this.main_conn_dialog_name = "添加";
      this.main_conn_dialogflag = true;
    },
    btn_delconn() {
      if (XE.isUndefined(this.connectioninfo.connectioncode) || this.connectioninfo.connectioncode == "") {
        this.$message.error("请选择需要删除的数据！");
        return false;
      }
      let _this = this;
      this.$confirm("此操作将永久删除连接<span style='color:red;font-weight:bold'>" + this.$refs.conn_table.getCurrentRow().connectionname + "</span>, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        dangerouslyUseHTMLString: true,
        type: "warning"
      })
        .then(() => {
          this.$tool
            .request({
              url: "MNG/MNG1/MNG124",
              method: "post",
              data: {
                action: "conn_delete",
                connectioncode: _this.connectioninfo.connectioncode
              }
            })
            .then(res => {
              if (res.flag == 1) {
                _this.$message({
                  message: "删除成功！",
                  type: "success"
                });
                _this.main_data_query();
              } else {
                _this.$message.error(res);
              }
            })
            .catch(e => {
              this.$message.error(e);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    SaveAll() {
      this.SaveAction(2).then(() => {
        this.$message({
          message: "保存成功！",
          type: "success"
        });
        this.main_data_query();
      });
    },
    CancelChange() {
      this.$confirm("此操作将取消所有改动，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.main_data_query();
      });
    },
    GetRowClassName({ row, rowIndex }) {
      if (row.inuse != "1") {
        return "rm-disable"; //禁用
      }
    },
    conn_table_changeEvent({ row, rowIndex, column, columnIndex }, event) {
      this.connectioninfo = XE.clone(row, true);
      this.oldconn_info_B = XE.clone(row, true);
      this.changeflag = false;
      this.main_data_query();
    },
    tab_getdata(tab, event) {
      if (tab.label == "详细信息") {
        this.tabindex = "1";
        if (this.tabindexlist.indexOf("1") <= -1) this.tabindexlist.push("1");
      }
    },
    HasChange(val) {
      this.changeflag = true;
    },
    DBChange(val) {
      switch (val) {
        case "SQL":
          if (this.main_conn_dialogflag) this.conn_info_F.servername = "IP地址,端口号";
          else this.connectioninfo.servername = "IP地址,端口号";
          break;
        case "ORACLE":
          if (this.main_conn_dialogflag) {
            this.conn_info_F.servername = "IP地址:端口号/实例名";
            this.conn_info_F.dbname = " ";//空字符防止oracle插入not null保存报错
          } else {
            this.connectioninfo.servername = "IP地址:端口号/实例名";
            this.connectioninfo.dbname = " ";//空字符防止oracle插入not null保存报错
          }
          break;
        case "MYSQL":
          if (this.main_conn_dialogflag) this.conn_info_F.servername = "IP地址:端口号";
          else this.connectioninfo.servername = "IP地址:端口号";
          break;
        default:
          if (this.main_conn_dialogflag) this.conn_info_F.servername = "";
          else this.connectioninfo.servername = "";
          break;
      }
      this.changeflag = true;
    },
    SaveAction(type) {
      return Promise((s, f) => {
        this.pageinitloading = true;
        this.btn_conn_dialog_saveEvent(type)
          .then(() => {
            s();
            this.pageinitloading = false;
          })
          .catch(res => {
            f(res);
            this.pageinitloading = false;
          });
      });
    },
    async main_data_query() {
      this.main_conn_loading = true;
      try {
        const res = await this.$tool.request({
          url: "MNG/MNG1/MNG124",
          method: "post",
          data: {
            action: "conn_query"
          }
        });
        var Datas = [];
        if (res.Data.length > 0) {
          Datas = res.Data.sort((a, b) => b.inuse - a.inuse);
          XE.each(Datas, (item, key) => {
            if (item.inuse == "1") {
              item.inuse = true;
            } else {
              item.inuse = false;
            }
          });
          if (JSON.stringify(this.connectioninfo) != "{}" && Datas.filter(item => item.connectioncode == this.connectioninfo.connectioncode).length > 0) {
            this.$refs.conn_table.setCurrentRow(Datas.filter(item => item.connectioncode == this.connectioninfo.connectioncode)[0]);
            this.connectioninfo = XE.clone(Datas.filter(item => item.connectioncode == this.connectioninfo.connectioncode)[0], true);
            this.oldconn_info_B = XE.clone(Datas.filter(item => item.connectioncode == this.connectioninfo.connectioncode)[0], true);
          } else {
            this.$refs.conn_table.setCurrentRow(Datas[0]);
            this.connectioninfo = XE.clone(Datas[0], true);
            this.oldconn_info_B = XE.clone(Datas[0], true);
          }
          this.main_conn_data_all = Datas;
          this.QueryDateBase();
          this.$nextTick(() => {
            if (this.main_conn_data.filter(item => item.connectioncode == this.connectioninfo.connectioncode).length == 0) {
              var row = this.$refs.conn_table.getData(0);
              this.connectioninfo = XE.clone(row, true);
              this.$refs.conn_table.setCurrentRow(row);
            }
          });
        }
        this.main_conn_loading = false;
        this.changeflag = false;
      } catch (e) {
        this.main_conn_loading = false;
        this.$message.error(e);
      }
    },
    btn_conn_dialog_canelEvent() {
      this.main_conn_dialogflag = false;
    },
    btn_conn_dialog_saveEvent(type) {
      return Promise((s, f) => {
        var gData = type == "1" ? this.conn_info_F : this.connectioninfo;
        var connectioncode = "";
        if (type == "1") connectioncode = this.conn_info_F.connectioncode;
        else connectioncode = this.oldconn_info_B.connectioncode;
        if (JSON.stringify(this.oldconn_info_B) != JSON.stringify(this.connectioninfo) || type) {
          if (XE.isUndefined(gData.connectioncode) || gData.connectioncode === "") {
            f({ connectioncode: connectioncode, msg: "连接代码不可为空！" });
            return false;
          }
          if (XE.isUndefined(gData.connectionname) || gData.connectionname === "") {
            f({ connectioncode: connectioncode, msg: "连接名称不可为空！" });
            return false;
          }
          if (XE.isUndefined(gData.seq) || gData.seq === "") {
            f({ connectioncode: connectioncode, msg: "序号不可为空！" });
            return false;
          }

          gData.inuse = gData.inuse ? "1" : "0";
          let datajson = JSON.stringify(gData);
          this.$tool
            .request({
              url: "MNG/MNG1/MNG124",
              method: "post",
              data: {
                action: "conn_addoredit",
                data: datajson,
                type: type,
                connectioncode: connectioncode
              }
            })
            .then(res => {
              if (res.flag == "1") {
                this.main_conn_dialogflag = false;
                if (type == 1) {
                  this.connectioninfo = XE.clone(this.conn_info_F, true);
                }
                s();
              } else {
                this.$message.error(res);
                f();
              }
            })
            .catch(e => {
              this.$message.error(e);
              f();
            });
        } else {
          s();
        }
      });
    },
  },
};
</script>

<style scoped>
::v-deep .vxe-body--row.row-stop {
  color: white !important;
  background-color: rgb(255, 192, 192) !important;
}

::v-deep .vxe-body--row.row-new {
  color: red !important;
}

::v-deep .vxe-body--row.row-green {
  background-color: #187 !important;
  color: #fff;
}

::v-deep .vxe-body--column.col-red {
  background-color: red;
  color: #fff;
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: black;
}

::v-deep .el-checkbox.is-disabled .el-checkbox__label {
  color: black;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: black;
}

::v-deep .rm-disable {
  cursor: default;
}

::v-deep .el-checkbox__inner::after {
  border: 2px solid #000000 !important;
  box-sizing: content-box;
  content: "";
  border-left: 0 !important;
  border-top: 0 !important;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 3px;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}

::v-deep .el-checkbox__input.is-disabled+span.el-checkbox__label {
  color: #000000;
  cursor: not-allowed;
}

::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner,
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner+.el-input.is-disabled .el-input__inner {
  background-color: #ffffff !important;
}

.el-main {
  padding: 0;
}

.pagetop {
  left: 0;
  right: 0;
  height: 36px;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.middle-center {
  position: absolute;
  height: 100%;
  right: 675px;
  left: 0;
  overflow: auto;
}

.middle-right {
  background-color: chartreuse;
  position: absolute;
  top: 0;
  bottom: 0px;
  overflow: visible;
  width: 670px;
  right: 0px;
}

table tr td:nth-child(odd) {
  text-align: right;
  white-space: nowrap;
}

table tr td:nth-child(even) {
  text-align: left;
}

table tr td:nth-child(1) {
  width: 80px;
}

table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 5px;
}

::v-deep .vxe-body--row .el-input--small .el-input__inner {
  height: 20px !important;
  line-height: 20px !important;
}

::v-deep .col--edit .vxe-cell {
  /* padding: 0 0; */
  padding-top: 0px;
  padding-right: 3px;
  padding-bottom: 0px;
  padding-left: 3px;
}

::v-deep .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}

::v-deep .disabled-cell {
  color: rgb(252, 6, 6);
}

.vxe-table .vxe-cell {
  padding: 0 5px !important;
}
</style>
